<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="grid-content">
          <div class="create" @click="onedLevel" v-if="">添加一级</div>
          <div class="create" @click="twodLevel" v-if="">添加二级</div>
          <div class="create" @click="treedLevel" v-if="">添加三级</div>
        </div>
      </el-col>
    </el-row>
    <div class="main">
      <div class="orgbtn fl">
        <label class="create bgblue">任务对象类型</label>
        <em></em>
      </div>
      <div class="listItem">
        <ul>
          <li :class="index==dlevel1?'activeli':''" v-for="(item,index) in taskObject" :key="index" class="itemli">
            <hr></hr>
            <div class="itemson" @click='actived(index, "dlevel1")'>
              <em :class="index==dlevel1||!item.subset?'el-icon-minus':'el-icon-plus'"
                  style="cursor: pointer;"></em>
              <span :class="index==dlevel1?'active':''" style="cursor: pointer;">{{item.taskname}}</span>

            </div>
            <i class="el-icon-edit edit-icon" @click="editbtn(item, 1)"
               style="position:relative;z-index:3;cursor: pointer;margin-left:10px;"></i>
            <i class="el-icon-delete edit-icon" v-if='cuid==1' @click="delTaskbtn(item)"
               style="position:relative;z-index:3;cursor: pointer;margin-left:10px;"></i>
            <hr v-if="index==dlevel1&&item.son!=''" style="width:100px"></hr>
            <div class="items" ref="ele" style="left:200px">
              <ul v-if='index==dlevel1'>
                <li v-for="(item1,index1) in item.subset" :key="index1"
                    :class='item.subset.length>2?"margin50":"margin25"' class="itemlison">
                  <hr class="fl width-30"></hr>
                  <div class="itemson" @click='actived(index1, "dlevel2")'>
                    <em :class="index1==dlevel2||!item1.subset?'el-icon-minus':'el-icon-plus'"
                        style="cursor: pointer;"></em>
                    <span id="ul1" style="cursor: pointer;"
                          :class="index1==dlevel2?'active':''">{{item1.taskname}}</span>
                  </div>
                  <i class="el-icon-edit edit-icon" @click="editbtn(item1, 2)"
                     style="position:relative;z-index:3;cursor: pointer;margin-left:10px;"></i>
                  <i class="el-icon-delete edit-icon" v-if='cuid==1' @click="delTaskbtn(item1)"
                     style="position:relative;z-index:3;cursor: pointer;margin-left:10px;"></i>
                  <hr style="width:115px" v-if="index1==dlevel2&&item1.subset!=''"></hr>
                  <div class="items-cont" id="ul2" style="left:214px">

                    <ul v-if='index1==dlevel2'>
                      <li v-for='(item2,index2) in item1.subset' :key="index2"
                          :class='item1.subset.length>2?"margin150":"margin125"'>
                        <div class="item-title">
                          <hr></hr>
                          <em class="el-icon-minus"></em>
                          <span class="active">{{item2.taskname}}</span>
                          <i class="el-icon-edit edit-icon" @click="editbtn(item2, 3)"
                             style="position:relative;z-index:3;cursor: pointer;margin-left:10px;"></i>
                          <i class="el-icon-delete edit-icon" v-if='cuid==1' @click="delTaskbtn(item2)"
                             style="position:relative;z-index:3;cursor: pointer;margin-left:10px;"></i>
                        </div>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 任务对象类型 2 -->
    <el-dialog title="" :visible.sync="dleveldialog" width="450px" append-to-body @close="toClose">
            <span>
                <h2 class="titleblue">{{addThird ? '添加三级任务对象类型':'添加二级任务对象类型'}}</h2>
                <div class="contant type-div">
                    <el-form ref="form" :model="dform" label-width="150px">

                        <el-form-item label="一级任务对象类型">
                            <el-select v-model="dform.level" placeholder="请选择" class="select-width-220" @change="levelChange($event)">
                                <el-option v-for="item in taskObject" :key="item.id" :label="item.taskname"
                                           :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="二级任务对象类型">
                            <el-select v-model="dform.level2" placeholder="请选择" class="select-width-220" v-if="addThird">
                                <el-option v-for="item in taskObject2" :key="item.id" :label="item.taskname"
                                           :value="item.id"></el-option>
                            </el-select>
                            <el-input v-model="dform.level2" class="select-width-220" v-if="!addThird"></el-input>
                        </el-form-item>
                        <el-form-item label="三级任务对象类型" v-if="addThird">
                            <el-input v-model="dform.level3" class="select-width-220"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </span>
      <el-row :gutter="24" class="footerbtn">
        <el-button class="sure" @click="taskbtn">添加</el-button>
        <el-button class="cancel" @click="toClose">取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import taskObjectService from '@/services/TaskObjectService.js'

  export default {
    props: ['taskObject'],
    name: 'TaskObject',
    data () {
      return {
        addThird: false,
        taskObject2: [],
        objectsos: [],
        tasktOptions: [],
        taskOptions: [],
        level1: -1,
        level2: -1,
        dlevel1: -1,
        dlevel2: -1,
        mlevel1: -1,
        mlevel2: -1,
        dleveldialog: false,
        tleveldialog: false,
        dform: {
          level: '',
          level2: '',
          level3: '',
        },
        dtform: {
          level: '',
          taskname: '',
        },
        mltitle: '添加巡航里程',
        detail: '',
        cuid: 1
      }
    },
    methods: {
      actived (index, key) {
          if (this[key] == index) {
              this[key] = -1
              return false
          }
          this[key] = index
          // this.fheight= this.$refs.ele[index].clientHeight+'px'
      },
      levelChange (val) {
        this.taskObject.forEach(item => {
          if (item.id == val) {
            this.taskObject2 = item.subset
          }
        })
      },
      editbtn (item, num) {
        let str = '', error = ''
        switch (num) {
          case 1:
            str = '请输入一级任务对象类型'
            error = '一级任务对象类型不能为空'
            break
          case 2:
            str = '请输入二级任务对象类型'
            error = '二级任务对象类型不能为空'
            break
          case 3:
            str = '请输入三级任务对象类型'
            error = '三级任务对象类型不能为空'
            break
        }
        this.$prompt(str, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
          inputErrorMessage: error,
          inputValue: item.taskname,
          customClass: 'customClass',
        }).then(({value}) => {
          let obj = {
            level: item.level, //  级别 ,
            taskname: value, // : 名称 ,
            pid: item.parentId, //  父ID ,
            id: item.id,
            createTime: item.createTime
          }
          taskObjectService.update(obj).then(res => {
            this.dleveldialog = false
            this.$alert('编辑成功')
            this.$emit('update')
          })
        }).catch(() => {
          this.$message('您已取消此次编辑')
        })
      },
      onedLevel () {
        this.$prompt('请输入一级任务对象类型', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
          inputErrorMessage: '一级任务对象类型不能为空',
          customClass: 'customClass',
        }).then(({value}) => {
          let obj = {
            level: 1, //  级别 ,
            taskname: value, // : 名称 ,
            pid: null, //  父ID ,
          }
          taskObjectService.create(obj).then(res => {

            this.$emit('update')
          })
        }).catch(() => {
          this.$message('您已取消此次添加')
        })
      },
      twodLevel () {
        this.dleveldialog = true
      },
      treedLevel () {
        this.dleveldialog = true
        this.addThird = true
      },
      toClose () {
        this.dleveldialog = false
        this.addThird = false
        this.dform = {}
      },
      asd2 (index) {
        this.dlevel1 = index
      },
      delTaskbtn (item) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            taskObjectService.delete(item.id).then(res => {

              this.$alert('删除成功')
              this.dleveldialog = false
              this.$emit('update')
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      taskbtn () {
        if (!this.dform.level) {
          this.$alert('请选择一级任务对象类型')
          return false
        }
        if (!this.dform.level2) {
          this.$alert('请输入二级任务对象名称')
          return false
        }
        if (this.addThird && !this.dform.level3) {
          this.$alert('请输入三级任务对象名称')
          return false
        }

        let obj = {
          level: 2, //  级别 ,
          taskname: this.dform.level2, // : 名称 ,
          pid: this.dform.level, //  父ID ,
        }
        if (this.addThird) {
          obj.taskname = this.dform.level3
          obj.pid = this.dform.level2
          obj.level = 3
        }
        taskObjectService.create(obj).then(res => {

          this.dleveldialog = false
          this.$emit('update')
        })
      },
    }
  }
</script>

<style scoped lang="scss" src="../Dcustom.scss"></style>
